<template>
	<view>
		<view class="goods-list">
			<view  v-for="(item,index) in goodsList" :key="index" @click="gotoDetail(item)">
				<!-- :item是从my-goods组件中props传来的 ="item"是本页中的item -->
				<my-goods :item="item"></my-goods>
			</view>
		
				<text style="display: flex;justify-content: center;margin-bottom: 12px;color: #CCCCCC;font-size: 9px;">{{noDataText}}</text>
		
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//请求参数
				queryObj:{
					query: '',
					cid: '',
					pageNum: 1,
					pageSize: 10
				},
				//商品列表
				goodsList: [],
				//总条数
				total: 0,
				//设置节流阀
				isloading: false,
				//数据加载完底部显示的内容
				noDataText: ''
			};
		},
		onLoad(options) {
			// options是其他页面传递到本页面的参数
			// console.log(options)
			this.queryObj.query = options.query || ''
			this.queryObj.cid = options.cid || ''
			// console.log(this.queryObj)
			this.getGoodsList()
			
		},
		methods:{
			async getGoodsList(cb){
				//打开节流阀
				this.isloading = true
				const {data : res}  = await uni.$http.get('/api/public/v1/goods/search',this.queryObj)
				//请求到数据后关闭节流阀
				this.isloading = false
				//当数据加载完毕 立即调用cb回调函数
				cb && cb()
				if (res.meta.status !== 200) return uni.$showMsg()
				this.goodsList = [...this.goodsList,...res.message.goods]
				this.total = res.message.total
			},
			gotoDetail(item){
				uni.navigateTo({
					url:'/subpkg/goods_detail/goods_detail?goods_id=' + item.goods_id
				})
			}
		},
		onReachBottom(){
			//如果节流阀在用  则不调用getGoodsList()
			if( this.isloading == false && this.queryObj.pageNum * this.queryObj.pageSize <= this.total){
				this.queryObj.pageNum++
				this.getGoodsList()
			}else if(this.queryObj.pageNum * this.queryObj.pageSize >= this.total){
				uni.$showMsg('到底了 没有更多的数据了')
				this.noDataText = '数据已全加载完毕~'
			}
		},
		onPullDownRefresh() {
			this.noDataText = ''
			this.queryObj.pageNum=1
			this.isloading = false
			this.goodsList = []
			this.getGoodsList(()=>uni.stopPullDownRefresh())
			
		}
	}
</script>

<style lang="scss">

</style>